<template>
    <div>
        <div style="box-shadow: 0 0 10px rgba(0, 0, 0, .1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
            早
        </div>

        <div style="display: flex">
            <el-card style="width: 30%; margin-right: 10px">
                <div slot="header" class="clearfix">
                    <span>案例</span>
                </div>
                <div>
                    <div style="margin-top: 20px">
                        <div style="margin: 10px 0"><strong>主题色</strong></div>
                        <el-button type="primary">按钮</el-button>
                        <el-button type="success">按钮</el-button>
                        <el-button type="warning">按钮</el-button>
                        <el-button type="danger">按钮</el-button>
                        <el-button type="info">按钮</el-button>
                    </div>
                </div>
            </el-card>
            <el-card style="width: 70%">
                <div slot="header" class="clearfix">
                                <span>
                                  渲染用户数据
                                </span>
                </div>
                <div>
                    <el-table :data="users" style="width: 100%">
                        <el-table-column label="ID" prop="id"></el-table-column>
                        <el-table-column label="用户名" prop="username" width="150px"></el-table-column>
                        <el-table-column label="姓名" prop="name" width="150px"></el-table-column>
                        <el-table-column label="地址" prop="address" width="200px"></el-table-column>
                        <el-table-column label="上传头像" width="120px">
                            <template v-slot="scope">
                                <el-upload
                                        :show-file-list="false"
                                        :headers="{token:user.token}"
                                        :on-success="(response, file, fileList)=>handleAvatarUpload(scope.row, response, file, fileList)"
                                        action="http://localhost:8099/file/upload">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </template>
                        </el-table-column>
                        <el-table-column label="用户头像" width="120px">
                            <template v-slot="scope">
                                <el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 50px; height: 50px"></el-image>
                                <el-button v-if="scope.row.avatar" size="mini" @click="avatardownload(scope.row.avatar)">下载</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeView",
        data(){
            return {
                users: [],
                user: JSON.parse(localStorage.getItem("my-user") || "{}")
            }
        },
        mounted() {
            this.$request.get('/user/selectAll').then(res=>{
                if (res.code==='200') {
                    // console.log(res)
                    this.users = res.data
                }

            })
        },
    }
</script>

<style scoped>

</style>